<template>
  <div style="ds-box2 ds-box-hover">
    <div class="ds-box2 ds-box-hover" @click="addInteraction()">
      <div style="width: 5%"></div>
      <div class="ds-grow">
        <span class="data-name">多点测距离</span>
      </div>
    </div>
    <div class="ds-hr2"></div>
  </div>
</template>
<script>
import { Draw } from "ol/interaction";
import { Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { LineString } from "ol/geom";
import { unByKey } from "ol/Observable";
import { getLength } from "ol/sphere";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import Circle from "ol/style/Circle";
import Overlay from "ol/Overlay";
export default {
  props: ["map"], //地图组件传值
  data() {
    return {
      sketch: null,
      helpTooltipElement: null,
      helpTooltip: null,
      continueLineMsg: "点击继续画线",
    };
  },
  methods: {
    //格式化输出
    formatLength(line) {
      const length = getLength(line);
      let output;
      if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + " " + "km";
      } else {
        output = Math.round(length * 100) / 100 + " " + "m";
      }
      return output;
    },
    //测量方法
    addInteraction() {
      let _this = this;
      const source = new VectorSource();
      const vector = new VectorLayer({
        source: source,
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          stroke: new Stroke({
            color: "#ffcc33",
            width: 2,
          }),
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: "#ffcc33",
            }),
          }),
        }),
      });
      this.map.addLayer(vector);

      //设置画线样式
      // const type = typeSelect.value == 'area' ? 'Polygon' : 'LineString';
      let draw = new Draw({
        source: source,
        // type: type,
        type: "LineString",
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          stroke: new Stroke({
            color: "rgba(0, 0, 0, 0.5)",
            lineDash: [10, 10],
            width: 2,
          }),
          image: new Circle({
            radius: 5,
            stroke: new Stroke({
              color: "rgba(0, 0, 0, 0.7)",
            }),
            fill: new Fill({
              color: "rgba(255, 255, 255, 0.2)",
            }),
          }),
        }),
      });
      this.map.addInteraction(draw);
      let data = this.createMeasureTooltip();
      let measureTooltip = data[0];
      let measureTooltipElement = data[1];

      // let measureClose = createMeasureClose(vector, measureTooltip);
      let data2 = this.createMeasureClose(vector, measureTooltip);
      let measureClose = data2[0];
      let measureCloseElement = data2[1];
      this.createHelpTooltip();
      let listener;
      draw.on("drawstart", function (evt) {
        // set sketch
        _this.sketch = evt.feature;

        /** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */
        let tooltipCoord = evt.coordinate;

        listener = _this.sketch.getGeometry().on("change", function (evt) {
          const geom = evt.target;
          let output;
          if (geom instanceof LineString) {
            output = _this.formatLength(geom);
            tooltipCoord = geom.getLastCoordinate();
          }
          //输出km
          // console.log(output);
          measureTooltipElement.innerHTML = output;
          measureTooltip.setPosition(tooltipCoord);
          measureClose.setPosition(tooltipCoord);
        });
        // console.log("开始画了");
      });

      draw.on("drawend", function () {
        measureTooltipElement.className = "ol-tooltip ol-tooltip-static";
        measureTooltip.setOffset([0, -7]);
        measureCloseElement.className = "ol-tooltip ol-tooltip-static";
        measureClose.setOffset([-56, -9]);
        // unset sketch
        _this.sketch = null;
        unByKey(listener);
        // console.log("画结束了");
        _this.map.removeInteraction(draw);
        _this.map.removeOverlay(_this.helpTooltip);
      });
    },
    //创建新的help tool
    createHelpTooltip() {
      if (this.helpTooltipElement) {
        this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
      }
      this.helpTooltipElement = document.createElement("div");
      this.helpTooltipElement.className = "ol-tooltip hidden";
      this.helpTooltip = new Overlay({
        element: this.helpTooltipElement,
        offset: [15, 0],
        positioning: "center-left",
      });
      this.map.addOverlay(this.helpTooltip);
    },
    //创建新的 measure tooltip
    createMeasureTooltip() {
      let measureTooltip = null;
      let measureTooltipElement = null;
      if (measureTooltipElement) {
        measureTooltipElement.parentNode.removeChild(measureTooltipElement);
      }
      measureTooltipElement = document.createElement("div");
      measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";
      measureTooltip = new Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: "bottom-center",
        stopEvent: false,
        insertFirst: false,
      });
      this.map.addOverlay(measureTooltip);
      return [measureTooltip, measureTooltipElement];
    },
    //创建新的measure close
    createMeasureClose(vector, measureTooltip) {
      let measureClose = null;
      let measureCloseElement = null;
      if (measureCloseElement) {
        measureCloseElement.parentNode.removeChild(measureCloseElement);
      }
      measureCloseElement = document.createElement("a");
      measureCloseElement.innerHTML = "关闭";
      measureCloseElement.title = "清除测量";
      measureCloseElement.className = "ol-tooltip ol-tooltip-measure";
      measureCloseElement.style.cursor = "pointer";

      measureCloseElement.addEventListener("click", () => {
        this.map.removeOverlay(measureTooltip);
        this.map.removeOverlay(measureClose);
        this.map.removeLayer(vector);
        //  console.log("点击了删除");
      });
      measureClose = new Overlay({
        element: measureCloseElement,
        offset: [-56, -17],
        positioning: "bottom-center",
        stopEvent: false,
        insertFirst: false,
      });
      this.map.addOverlay(measureClose);
      return [measureClose, measureCloseElement];
    },
  },
};
</script>

<style scoped></style>
